<template>
  <div id="bottom-right-board">
    <div class="center-board-title">人员结构变化趋势（模拟数据）</div>
    <div id="stackBarChart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myEchart: null
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const _this = this
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          show: false,
          selectedMode: false, //取消图例上的点击事件
          data: ['事业编制', '周转编制', '聘教控制数'],
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        },
        grid: {
          left: '30',
          top: '30',
          bottom: '30',
          right: '30',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false // 不显示刻度线
            },
            axisLabel: {
              fontSize: 14,
              color: '#fff',
              interval: 0 // 强制显示所有刻度标签
            },
            data: [
              '2021年6月',
              '2021年9月',
              '2021年12月',
              '2022年3月',
              '2022年6月',
              '2022年9月'
            ]
          }
        ],
        yAxis: [
          {
            splitLine: { show: false },
            type: 'value',
            axisTick: false, // 不显示y轴的刻度
            axisLabel: {
              fontSize: 14,
              color: '#fff',
              interval: 0 // 强制显示所有刻度标签
            },
          }
        ],
        series: [,
          {
            name: '总计',
            type: 'bar',
            barGap: '-100%',//与堆叠柱状重合
            barWidth: '40%',
            itemStyle: {
              color: '#634FDA'
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            data: [86, 86, 87, 91, 91, 107]
          },
          {
            name: '事业编制',
            type: 'bar',
            stack: '编制类型',
            barWidth: '40%',
            itemStyle: {
              color: '#01C5B2'
            },
            data: [49, 48, 47, 51, 44, 56]
          },
          {
            name: '周转编制',
            type: 'bar',
            stack: '编制类型',
            barWidth: '40%',
            itemStyle: {
              color: '#eba954'
            },
            data: [11, 13, 25, 27, 38, 43]
          },
          {
            name: '聘教控制数',
            type: 'bar',
            barWidth: '40%',
            stack: '编制类型',
            //barMaxWidth:30,//柱子的宽度
            barWidth: 30,
            itemStyle: {
              color: '#d74e67'
            },
            data: [26, 25, 15, 13, 9, 8]
          }
        ]
      }

      this.myEchart = this.$echarts.init(
        document.getElementById('stackBarChart')
      )
      this.myEchart.setOption(option)
      window.addEventListener('resize', () => this.myEchart.resize(), false)
    }
  }
}
</script>

<style lang="scss">
#bottom-right-board {
  width: calc(40% - 15px);
  height: 100%;
  box-sizing: border-box;
  height: 100%;
  background-color: rgba(1, 35, 102, 0.9);
  //background-color: #012366;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .center-board-title {
    font-weight: bold;
    height: 50px;
    border-bottom: #336699 1px solid;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }
}
#stackBarChart {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
